* {
  box-sizing: border-box;
}

.gantt-chart {
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 rgba(27, 33, 41, 0.1);
  --border: 1px solid rgba(196, 201, 207, 0.3);
  background-color: #F8FCFF;
  position: relative;

  .thead {
    height: 48px;
    width: 100%;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3000;

    .head-time {
      flex: 1;
      background-color: #fff;


      .year {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
      }

      .mounth {
        width: 100%;
        display: flex;
        align-items: center;

        .m-item {
          width: var(--grid-width);
          min-width: 40px;
          text-align: center;
          border-bottom: var(--border);
          position: relative;
          top: 1px;

          &:first-child {
            width: calc(var(--grid-width) + 8px);
            min-width: 48px;
            padding-left: 8px;
          }

          &:last-child {
            width: calc(var(--grid-width) + 8px);
            min-width: 48px;
            padding-right: 8px;
          }
        }
      }

    }
  }

  .tbody {
    .item-row {
      display: flex;

      .mounth {
        .item-box {
          width: 100%;
          display: flex;
          align-items: center;

          .m-item:first-child {
            width: calc(var(--grid-width) + 8px);
            min-width: 48px;
            padding-left: 8px;
          }

          .m-item:last-child {
            width: calc(var(--grid-width) + 8px);
            min-width: 48px;
            padding-right: 8px;
          }

        }
      }

      .m-item {
        background-color: #fff;
      }



      &:hover {

        .left-item,
        .m-item {
          background-color: rgba(196, 201, 207, 0.3);
        }

        .left-item {
          border-radius: 4px 0 0 4px;
        }

        .m-item:last-child {
          border-radius: 0 4px 4px 0;
        }
      }

      &:first-child {
        .mounth {
          .m-item {
            position: relative;

            &::after {
              content: '';
              display: inline-block;
              width: 1px;
              height: var(--tbody-height);
              position: absolute;
              top: -1px;
              right: 0;
              background-color: rgba(196, 201, 207, 0.3);
              z-index: 900;
              pointer-events: none;
            }

            &:last-child {
              &::after {
                display: none;
              }
            }
          }
        }
      }

      .mounth {
        flex: 1;
        display: flex;
        align-items: center;
        position: relative;

        .m-item {
          min-width: 40px;
          width: var(--grid-width);
          height: 40px;
        }

        .bar {
          position: absolute;
          top: 12px;
          height: 16px;
          border-radius: 4px;
          overflow: hidden;
          z-index: 999;

          &::before {
            content: '';
            display: inline-block;
            position: absolute;
            right: -1px;
            top: 0;
            width: var(--scale-lines);
            height: 100%;
            background-color: #E9EDF1;
            background-image: repeating-linear-gradient(125deg, transparent 0, transparent 2px, #D4DBE4 3px, #D4DBE4 6px);
          }
        }
      }
    }
  }

  .tfooter {
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: sticky;
    left: calc(var(--left-width) - 1px);
    bottom: 0;
    width: calc(100% - var(--left-width));
    z-index: 3000;
    background-color: #fff;
    border-left: var(--border);
    box-shadow: 0 1px 24px 0 rgba(98, 108, 120, 0.08);

    &::before {
      content: "";
      position: absolute;
      top: 0px;
      width: 10px;
      bottom: -1px;
      overflow-x: hidden;
      overflow-y: hidden;
      touch-action: none;
      pointer-events: none;
      box-shadow: none;
    }
  }


  .th-fixed-left,
  .td-fixed-left {
    position: sticky;
    left: 0;
    background-color: #F8FCFF;
    width: var(--left-width);
    min-width: var(--left-width);
    z-index: 2001;

    &::after {
      content: "";
      position: absolute;
      top: 0px;
      width: 10px;
      bottom: -1px;
      overflow-x: hidden;
      overflow-y: hidden;
      touch-action: none;
      pointer-events: none;
      box-shadow: none;
    }
  }

  .th-fixed-left {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: var(--border);
    border-right: var(--border);

    .resize-line {
      width: 2px;
      height: calc(var(--tbody-height) + 48px);
      position: absolute;
      top: 0;
      right: -2px;
      cursor: col-resize;

      &:hover {
        background-color: #246FE5;
      }
    }
  }

  .td-fixed-left {
    padding-left: 8px;


    .left-item {
      width: 100%;
      height: 40px;
      padding-right: 16px;
      line-height: 40px;
      border-right: var(--border);
    }
  }

}

.is-scroll-middle,
.is-scroll-right {

  .th-fixed-left,
  .td-fixed-left {
    &::after {
      right: -10px;
      box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .15);
    }
  }

  .tfooter {
    &::before {
      left: 0;
      box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .15);
      z-index: 3001;
    }
  }
}